<template>
  <div class="article">
    <el-button @click="show_dialog" type="primary">发布文章</el-button>
    <!-- 文章列表 -->
    <!-- {{ article.list }} -->
    <el-table :data="article.list" style="width: 100%">
      <el-table-column prop="id" label="编号" width="180" align="center">
      </el-table-column>
      <el-table-column prop="title" label="文章标题" width="750">
      </el-table-column>
      <el-table-column
        prop="category.name"
        label="新闻分类"
        width="180"
        align="center"
      >
      </el-table-column>
      <!-- <el-table-column prop="content" label="内容">
        <template v-slot="scope">
          <div v-html="scope.row.content"></div>
        </template>
      </el-table-column> -->
      <el-table-column
        prop="publishTime"
        :formatter="fmt"
        label="发布时间"
        width="100"
        align="center"
      >
        <!-- <template v-slot="scope">
           | 是管道符，将左侧的变量作为参数传递给右侧的函数
          <div>{{scope.row.publishTime | dateFMT}}</div>
        </template> -->
      </el-table-column>
      <el-table-column label="点赞次数" width="100" align="center"
        >0
      </el-table-column>
      <el-table-column label="阅读次数" width="100" align="center"
        >0
      </el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template v-slot="scope">
          <el-button @click="edit_article(scope.row)" type="warning"
            >修改</el-button
          >
          <el-button @click="delete_article(scope.row.id)" type="danger"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页按钮 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="obj.pageSize"
      :current-page="obj.page"
      @current-change="change"
      :total="article.total"
    >
    </el-pagination>
    <!-- 模态框 -->
    <el-dialog :title="title" :visible.sync="dialog_article" width="70%">
      <!-- {{ form_article }} -->
      <el-form :model="form_article">
        <el-form-item label="文章标题" :label-width="formLabelWidth_article">
          <el-input v-model="form_article.title"></el-input>
        </el-form-item>
        <el-form-item label="文章内容" :label-width="formLabelWidth_article">
          <Tinymce v-model="form_article.content"></Tinymce>
        </el-form-item>
        <el-form-item label="所属栏目" :label-width="formLabelWidth_article">
          <el-select v-model="form_article.categoryId" placeholder="请选择">
            <el-option
              v-for="item in category"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog_article = false">取 消</el-button>
        <el-button type="primary" @click="save_article">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// 导入qs
import qs from "qs";
// 导入moment
import moment from "moment";

import { mapActions, mapState } from "vuex";
// 导入组件
import Tinymce from "../../components/Tinymce";

export default {
  // 注册组件
  components: {
    Tinymce,
  },
  data() {
    return {
      title: "发布文章",
      obj: {
        page: 1,
        pageSize: 10,
      },
      tableData: [],
      total: 0,
      dialog_article: false,
      form_article: {},
      formLabelWidth_article: "120px",
      options: [],
    };
  },
  computed: {
    ...mapState("article", ["article", "category"]),
  },
  created() {
    this.page_query();
    this.findAll_category();
  },
  // 监听器
  // 当监听的变量发生变化时，执行监听中的代码
  watch: {
    obj: {
      handler: function () {
        this.page_query();
      },
      deep: true,
    },
  },
  // 过滤器 - 处理日期格式
  filters: {
    dateFMT(str) {
      // var res = moment(str).format('YYYY-MM-DD HH:mm:ss');
      // return res;
      return moment(str).format("YYYY-MM-DD HH:mm:ss");
    },
  },
  methods: {
    ...mapActions("article", [
      "findAllCategory",
      "page_query_article",
      "saveOrUpdate",
      "deleteArticle",
    ]),
    // 修改按钮
    edit_article(val) {
      // 0. 修改模态框标题
      this.title = "修改文章";
      // 1. 弹出模态框
      this.dialog_article = true;
      // 2. 将当前行数据放入模态框
      this.form_article = JSON.parse(JSON.stringify(val));
    },
    // 查询所有栏目
    findAll_category() {
      this.findAllCategory();
    },
    // 显示模态框
    show_dialog() {
      // 0. 修改模态框标题
      this.title = "发布文章";
      this.dialog_article = true;
    },
    // 保存文章
    save_article() {
      this.saveOrUpdate(this.form_article).then((res) => {
        this.dialog_article = false;
        this.page_query();
        this.form_article = {};
        if (res.status == 200) {
          this.$notify({
            title: "成功",
            message: res.message,
            type: "success",
          });
        } else if (res.status == 500) {
          this.$notify({
            title: "错误",
            message: res.message + "输入数据有误！",
            type: "error",
          });
        }
      });
    },
    fmt(row, column) {
      return moment(row.publishTime).format("YYYY-MM-DD HH:mm:ss");
    },
    // 页码改变
    change(page) {
      this.obj.page = page;
    },
    // 删除文章
    delete_article(id) {
    //   alert(id);
    
      this.deleteArticle({id}).then((res) => {
        if (res.status == 200) {
          this.$notify({
            title: "成功",
            message: res.message,
            type: "success",
          });
        } else if (res.status == 500) {
          this.$notify({
            title: "错误",
            message: res.message + "输入数据有误！",
            type: "error",
          });
        }
        this.page_query();
      });
    },
    // 分页查询文章
    page_query() {
      this.page_query_article(this.obj);
      //   this.axios({
      //     url: "http://47.93.255.92:8001/article/pageQuery",
      //     method: "get",
      //     params: this.obj,
      //   }).then((res) => {
      //     this.total = res.data.data.total;
      //     this.tableData = res.data.data.list;
      //   });
    },
  },
};
</script>